<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/blog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/blog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/blog/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/blog/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/blog/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/blog/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="mobx-state-tree,">





  <link rel="alternate" href="/blog/atom.xml" title="编程那点事" type="application/atom+xml">






<meta name="description" content="上一篇文章MST基础中简单地介绍了MST的几个基本概念和相关API，本文将带大家搭配React实现一个TodoList。 准备工作为了省去枯燥的项目搭建过程，本文选择使用stackblitz平台来编辑我们的代码。 同学们可以点击上面的地址fork一个starter项目，项目中已经配置好MST以及React相关的依赖，并且包含了一个简单的Counter demo，后面将在这个starter的基础上进">
<meta name="keywords" content="mobx-state-tree">
<meta property="og:type" content="article">
<meta property="og:title" content="[MobX State Tree数据组件化开发][2]：实例-TodoList">
<meta property="og:url" content="https://lhweb.gitee.io/blog/2019/10/07/MobX-State-Tree数据组件化开发-2-：实例-TodoList/index.html">
<meta property="og:site_name" content="编程那点事">
<meta property="og:description" content="上一篇文章MST基础中简单地介绍了MST的几个基本概念和相关API，本文将带大家搭配React实现一个TodoList。 准备工作为了省去枯燥的项目搭建过程，本文选择使用stackblitz平台来编辑我们的代码。 同学们可以点击上面的地址fork一个starter项目，项目中已经配置好MST以及React相关的依赖，并且包含了一个简单的Counter demo，后面将在这个starter的基础上进">
<meta property="og:locale" content="default">
<meta property="og:image" content="https://lhweb.gitee.io/blog/2019/10/07/MobX-State-Tree数据组件化开发-2-：实例-TodoList/1689d4e977365753.jpg">
<meta property="og:image" content="https://lhweb.gitee.io/blog/2019/10/07/MobX-State-Tree数据组件化开发-2-：实例-TodoList/1689d4da62714640.jpg">
<meta property="og:image" content="https://lhweb.gitee.io/blog/2019/10/07/MobX-State-Tree数据组件化开发-2-：实例-TodoList/1689d4d0c2c9af1c.jpg">
<meta property="og:updated_time" content="2019-10-07T10:24:56.058Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="[MobX State Tree数据组件化开发][2]：实例-TodoList">
<meta name="twitter:description" content="上一篇文章MST基础中简单地介绍了MST的几个基本概念和相关API，本文将带大家搭配React实现一个TodoList。 准备工作为了省去枯燥的项目搭建过程，本文选择使用stackblitz平台来编辑我们的代码。 同学们可以点击上面的地址fork一个starter项目，项目中已经配置好MST以及React相关的依赖，并且包含了一个简单的Counter demo，后面将在这个starter的基础上进">
<meta name="twitter:image" content="https://lhweb.gitee.io/blog/2019/10/07/MobX-State-Tree数据组件化开发-2-：实例-TodoList/1689d4e977365753.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/blog/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://lhweb.gitee.io/blog/2019/10/07/MobX-State-Tree数据组件化开发-2-：实例-TodoList/">





  <title>[MobX State Tree数据组件化开发][2]：实例-TodoList | 编程那点事</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="default">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/blog/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">编程那点事</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/blog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            Archives
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://lhweb.gitee.io/blog/blog/2019/10/07/MobX-State-Tree数据组件化开发-2-：实例-TodoList/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="lhweb">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="编程那点事">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">[MobX State Tree数据组件化开发][2]：实例-TodoList</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2019-10-07T17:40:59+08:00">
                2019-10-07
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>上一篇文章MST基础中简单地介绍了MST的几个基本概念和相关API，本文将带大家搭配React实现一个TodoList。</p>
<h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><p>为了省去枯燥的项目搭建过程，本文选择使用stackblitz平台来编辑我们的代码。</p>
<p>同学们可以点击上面的地址fork一个starter项目，项目中已经配置好MST以及React相关的依赖，并且包含了一个简单的Counter demo，后面将在这个starter的基础上进行开发。</p>
<h2 id="项目结构-amp-规范说明"><a href="#项目结构-amp-规范说明" class="headerlink" title="项目结构&amp;规范说明"></a>项目结构&amp;规范说明</h2><p>从上面的地址进入后，你会得到一个包含以下目录结构的初始项目。</p>
<p><img src="/blog/2019/10/07/MobX-State-Tree数据组件化开发-2-：实例-TodoList/1689d4e977365753.jpg" alt></p>
<p>其中，目录components用于存放React组件，目录models用于存放MST Model。</p>
<p>整个应用的Root Model在models/index.ts文件中定义：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; types &#125; <span class="keyword">from</span> <span class="string">'mobx-state-tree'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Counter &#125; <span class="keyword">from</span> <span class="string">'./Counter'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> Root = types</span><br><span class="line">  .model(<span class="string">'Root'</span>, &#123;</span><br><span class="line">    counter: types.optional(Counter, &#123;&#125;),</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>
<p>定义好的Root Model会在项目的入口index.tsx文件中被引入，并创建实例对象，然后使用mobx-react提供的Provider组件将Root Model的实例对象传递到应用的Context中：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; render &#125; <span class="keyword">from</span> <span class="string">'react-dom'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Provider &#125; <span class="keyword">from</span> <span class="string">'mobx-react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Root &#125; <span class="keyword">from</span> <span class="string">'./models'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ModelInjector &#125; <span class="keyword">from</span> <span class="string">'./components/ModelInjector'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">'./style.css'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; Counter &#125; <span class="keyword">from</span> <span class="string">'./components/Counter'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> root = Root.create(&#123;&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> ConnectedCounter = <span class="function"><span class="params">()</span> =&gt;</span> (</span><br><span class="line">  &lt;ModelInjector&gt;</span><br><span class="line">    &#123;(root) =&gt; <span class="xml"><span class="tag">&lt;<span class="name">Counter</span> <span class="attr">model</span>=<span class="string">&#123;root.counter&#125;/</span>&gt;</span>&#125;</span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">ModelInjector</span>&gt;</span></span></span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;Provider root=&#123;root&#125;&gt;</span><br><span class="line">      &lt;ConnectedCounter/&gt;</span><br><span class="line">    &lt;<span class="regexp">/Provider&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">render(&lt;App /</span>&gt;, <span class="built_in">document</span>.getElementById(<span class="string">'root'</span>));</span><br></pre></td></tr></table></figure>
<p>项目提供了一个名为ModelInjector的组件，index.tsx代码中，使用ModelInjector组件对Counter组件进行了一个包装，将root.counter这个节点Model作为props传给了Counter组件。在本文以及后续的文章中，将会沿用这样的方式在组件与Model之间建立连接。</p>
<p>这样做的好处是，可以让TypeScript的静态类型约束覆盖到整个应用，开发过程中可以享受到类型带来的便利：</p>
<p><img src="/blog/2019/10/07/MobX-State-Tree数据组件化开发-2-：实例-TodoList/1689d4da62714640.jpg" alt></p>
<p>ModelInjector组件的实现比较简单，可以在项目中自行查看。</p>
<h2 id="确定目标"><a href="#确定目标" class="headerlink" title="确定目标"></a>确定目标</h2><p>在开始动手编码之前，必须明确要做的这个东西是什么样的。</p>
<p>我们要做的这款TodoList大家应该比较熟悉：</p>
<p><img src="/blog/2019/10/07/MobX-State-Tree数据组件化开发-2-：实例-TodoList/1689d4d0c2c9af1c.jpg" alt></p>
<p>这款TodoList来自TodoMVC。</p>
<p>由于本文的主题不在UI的实现上，我们可以复用他的DOM结构和CSS，这会省去不少功夫。</p>
<h2 id="定义Model"><a href="#定义Model" class="headerlink" title="定义Model"></a>定义Model</h2><h3 id="TodoItem"><a href="#TodoItem" class="headerlink" title="TodoItem"></a>TodoItem</h3><p>从最基础的开始。TodoList的基本单位就是TodoItem，TodoItem具备的属性是他的id（用于编辑、删除时进行跟踪）、title，以及是否完成的标识done，所以可以得出：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// models/TodoItem.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; types, Instance &#125; <span class="keyword">from</span> <span class="string">'mobx-state-tree'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> TodoItem = types</span><br><span class="line">  .model(<span class="string">'TodoItem'</span>, &#123;</span><br><span class="line">    id: types.string,</span><br><span class="line">    title: types.string,</span><br><span class="line">    done: types.boolean,</span><br><span class="line">  &#125;)</span><br><span class="line">  .actions(<span class="function"><span class="params">self</span> =&gt;</span> (&#123;</span><br><span class="line">    switchDone(done?: <span class="built_in">boolean</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="keyword">typeof</span> done === <span class="string">'boolean'</span>) &#123;</span><br><span class="line">        self.done = done;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        self.done = !self.done;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;));</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">type</span> TodoItemInstance = Instance&lt;<span class="keyword">typeof</span> TodoItem&gt;;</span><br></pre></td></tr></table></figure>
<p>新建models/TodoItem.ts文件，写入上面的代码。</p>
<p>细心的同学会发现，上面代码中还export了一个type定义TodoItemInstance。这个type表示的是TodoItem这个Model的实例类型，可以在定义React组件的props类型时使用。</p>
<h3 id="TodoForm"><a href="#TodoForm" class="headerlink" title="TodoForm"></a>TodoForm</h3><p>应用还需要一个输入框，在新增的时候输入新TodoItem的title；以及一个可隐藏的输入框用来编辑已有TodoItem的title。</p>
<p>这两个输入框的功能相似，都是维护输入框的值并处理值的更新。不同的是编辑输入框会与某一个TodoItem关联，而新增输入框没有关联对象。</p>
<p>可以使用一个TodoForm的Model来维护两个输入框的状态：</p>
<figure class="highlight cs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// models/TodoForm.ts</span></span><br><span class="line">import &#123; types, Instance &#125; <span class="keyword">from</span> <span class="string">'mobx-state-tree'</span>;</span><br><span class="line">import &#123; TodoItemInstance &#125; <span class="keyword">from</span> <span class="string">'./TodoItem'</span>;</span><br><span class="line"></span><br><span class="line">export <span class="keyword">const</span> TodoForm = types</span><br><span class="line">  .model(<span class="string">'TodoForm'</span>, &#123;</span><br><span class="line">    <span class="keyword">value</span>: types.optional(types.<span class="keyword">string</span>, <span class="string">''</span>),</span><br><span class="line">    targetTodoId: types.optional(types.maybeNull(types.<span class="keyword">string</span>), <span class="literal">null</span>),</span><br><span class="line">  &#125;)</span><br><span class="line">  .views(self =&gt; (&#123;</span><br><span class="line">    <span class="function"><span class="keyword">get</span> <span class="title">trimedValue</span> (<span class="params"></span>)</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> self.<span class="keyword">value</span>.trim();</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="keyword">get</span> <span class="title">valid</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.trimedValue.length &gt; <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;))</span><br><span class="line">  .actions(self =&gt; (&#123;</span><br><span class="line">    setTarget(target: TodoItemInstance) &#123;</span><br><span class="line">      self.<span class="keyword">value</span> = target.title;</span><br><span class="line">      self.targetTodoId = target.id;</span><br><span class="line">    &#125;,</span><br><span class="line">    update(<span class="keyword">value</span>: <span class="keyword">string</span>) &#123;</span><br><span class="line">      self.<span class="keyword">value</span> = <span class="keyword">value</span>;</span><br><span class="line">    &#125;,</span><br><span class="line">    reset() &#123;</span><br><span class="line">      self.<span class="keyword">value</span> = <span class="string">''</span>;</span><br><span class="line">      self.targetTodoId = <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;));</span><br><span class="line"></span><br><span class="line">export type TodoFormInstance = Instance&lt;<span class="keyword">typeof</span> TodoForm&gt;;</span><br></pre></td></tr></table></figure>
<p>TodoForm中，使用value维护输入框的值，targetTodoId表示当前关联的TodoItem的id。并提供了用于关联TodoItem的setTarget方法，更新值的update方法以及重置状态的reset方法。</p>
<p>这里使用了types.optional为状态设置了初始值。</p>
<p>另外还提供了两个计算值：trimedValue以及valid。</p>
<p>这里需要注意的是，在valid的定义中，trimedValue引用的是this而不是self，这是由于valid以及trimedValue两者的定义写在同一个views方法中，在views方法结束前，TypeScript的类型系统并不能观察到self对应的类型中包含valid或者trimedValue，所以需要使用this来代替self。</p>
<p>除了views之外，actions或者volatile也需要注意上面这个问题。</p>
<h3 id="TodoList"><a href="#TodoList" class="headerlink" title="TodoList"></a>TodoList</h3><p>完成上面的两个Model之后，剩下的都是一些与列表相关的状态了。将TodoItem与TodoForm进行组合，构成整个TodoList应用的基本Model：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// models/TodoList.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; types &#125; <span class="keyword">from</span> <span class="string">'mobx-state-tree'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; TodoItem &#125; <span class="keyword">from</span> <span class="string">'./TodoItem'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; TodoForm &#125; <span class="keyword">from</span> <span class="string">'./TodoForm'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> TodoList = types</span><br><span class="line">  .model(<span class="string">'TodoList'</span>, &#123;</span><br><span class="line">    adderForm: types.optional(TodoForm, &#123;&#125;),</span><br><span class="line">    editorForm: types.optional(TodoForm, &#123;&#125;),</span><br><span class="line">    list: types.array(TodoItem),</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>
<p>其中adderForm与editorForm分别表示新增Todo与编辑Todo的表单Model，list用于管理Todo列表。</p>
<p>仔细观察目标的成品图，他还包括三个筛选按钮All、Active、Completed，用于筛选展现的Todo列表的类型，这里可以将三种类型定义为枚举TodoFilterType，新建enums.ts文件，输入代码：</p>
<figure class="highlight protobuf"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// enums.ts</span></span><br><span class="line">export <span class="class"><span class="keyword">enum</span> <span class="title">TodoFilterType</span> </span>&#123;</span><br><span class="line">  All = 'All',</span><br><span class="line">  Active = 'Active',</span><br><span class="line">  Completed = 'Completed'</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>然后为TodoList新增一个filterType的状态：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// models/TodoList.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; types &#125; <span class="keyword">from</span> <span class="string">'mobx-state-tree'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; TodoItem &#125; <span class="keyword">from</span> <span class="string">'./TodoItem'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; TodoForm &#125; <span class="keyword">from</span> <span class="string">'./TodoForm'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; TodoFilterType &#125; <span class="keyword">from</span> <span class="string">'../enums'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> TodoList = types</span><br><span class="line">  .model(<span class="string">'TodoList'</span>, &#123;</span><br><span class="line">    adderForm: types.optional(TodoForm, &#123;&#125;),</span><br><span class="line">    editorForm: types.optional(TodoForm, &#123;&#125;),</span><br><span class="line">    list: types.array(TodoItem),</span><br><span class="line">    filterType: types.optional(types.string, TodoFilterType.All),</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>
<p>有了这几个基础状态，就可以得到其他几个衍生状态:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// models/TodoList.ts</span></span><br><span class="line">...</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> TodoList = types</span><br><span class="line">  .model(<span class="string">'TodoList'</span>, &#123;</span><br><span class="line">    ...</span><br><span class="line">  &#125;)</span><br><span class="line">  .views(<span class="function"><span class="params">self</span> =&gt;</span> (&#123;</span><br><span class="line">    <span class="comment">// 已完成的Todo列表</span></span><br><span class="line">    <span class="keyword">get</span> doneList() &#123;</span><br><span class="line">      <span class="keyword">return</span> self.list.filter(<span class="function"><span class="params">i</span> =&gt;</span> i.done);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 未完成的Todo列表</span></span><br><span class="line">    <span class="keyword">get</span> activeList() &#123;</span><br><span class="line">      <span class="keyword">return</span> self.list.filter(<span class="function"><span class="params">i</span> =&gt;</span> !i.done);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 是否全部完成</span></span><br><span class="line">    <span class="keyword">get</span> isAllDone() &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.doneList.length === self.list.length;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 剩余未完成的Todo数量</span></span><br><span class="line">    <span class="keyword">get</span> activeCount() &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.activeList.length;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 当前展现的Todo列表</span></span><br><span class="line">    <span class="keyword">get</span> showList() &#123;</span><br><span class="line">      <span class="keyword">switch</span> (self.filterType) &#123;</span><br><span class="line">        <span class="keyword">case</span> TodoFilterType.Active:</span><br><span class="line">          <span class="keyword">return</span> <span class="keyword">this</span>.activeList;</span><br><span class="line">        <span class="keyword">case</span> TodoFilterType.Completed:</span><br><span class="line">          <span class="keyword">return</span> <span class="keyword">this</span>.doneList;</span><br><span class="line">        <span class="keyword">default</span>:</span><br><span class="line">          <span class="keyword">return</span> self.list;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 是否显示主体UI（没有Todo数据的时候只显示一个新增输入框）</span></span><br><span class="line">    <span class="keyword">get</span> isShowMain() &#123;</span><br><span class="line">      <span class="keyword">return</span> self.list.length &gt; <span class="number">0</span>;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 是否包含已完成的Todo，用于控制右下角[Clear completed]按钮的展现和隐藏</span></span><br><span class="line">    <span class="keyword">get</span> hasDoneTodos() &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.doneList.length &gt; <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;))</span><br></pre></td></tr></table></figure>
<p>最后，再补上更新状态的actions：</p>
<figure class="highlight zephir"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// models/TodoList.ts</span></span><br><span class="line">import &#123; types, cast, Instance &#125; from <span class="string">'mobx-state-tree'</span>;</span><br><span class="line">import uuid from <span class="string">'uuid/v1'</span>;</span><br><span class="line">...</span><br><span class="line">export <span class="keyword">const</span> TodoList = types</span><br><span class="line">  .model(<span class="string">'TodoList'</span>, &#123;</span><br><span class="line">    ...</span><br><span class="line">  &#125;)</span><br><span class="line">  .views(<span class="keyword">self</span> =&gt; (&#123;</span><br><span class="line">    ...</span><br><span class="line">  &#125;)</span><br><span class="line">  .actions(<span class="keyword">self</span> =&gt; (&#123;</span><br><span class="line">    <span class="comment">// 切换全部完成/全部未完成</span></span><br><span class="line">    switchAllDone(done?: <span class="keyword">boolean</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (typeof done !== <span class="string">'boolean'</span>) &#123;</span><br><span class="line">        done = !<span class="keyword">self</span>.isAllDone;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">self</span>.<span class="keyword">list</span>.<span class="keyword">forEach</span>(item =&gt; &#123;</span><br><span class="line">        item.switchDone(done);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 切换列表过滤类型</span></span><br><span class="line">    setFilterType(filterType: TodoFilterType) &#123;</span><br><span class="line">      <span class="keyword">self</span>.filterType = filterType;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 新增Todo</span></span><br><span class="line">    addTodo() &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="keyword">self</span>.adderForm.valid) &#123;</span><br><span class="line">        <span class="keyword">self</span>.<span class="keyword">list</span>.push(cast(&#123;</span><br><span class="line">          id: uuid(),</span><br><span class="line">          title: <span class="keyword">self</span>.adderForm.trimedValue,</span><br><span class="line">          done: <span class="keyword">false</span></span><br><span class="line">        &#125;));</span><br><span class="line">        <span class="keyword">self</span>.adderForm.reset();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 更新Todo</span></span><br><span class="line">    updateTodo() &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="keyword">self</span>.editorForm.valid) &#123;</span><br><span class="line">        <span class="keyword">const</span> item = <span class="keyword">self</span>.<span class="keyword">list</span>.find(i =&gt; i.id === <span class="keyword">self</span>.editorForm.targetTodoId);</span><br><span class="line">        <span class="keyword">if</span> (item) &#123;</span><br><span class="line">          item.title = <span class="keyword">self</span>.editorForm.trimedValue;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">self</span>.editorForm.reset();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 删除Todo</span></span><br><span class="line">    removeTodo(todoId: string) &#123;</span><br><span class="line">      <span class="keyword">const</span> index = <span class="keyword">self</span>.<span class="keyword">list</span>.findIndex(i =&gt; i.id === todoId);</span><br><span class="line">      <span class="keyword">if</span> (index &gt;= <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="keyword">self</span>.<span class="keyword">list</span>.splice(index, <span class="number">1</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 清除已完成Todos</span></span><br><span class="line">    clearDone() &#123;</span><br><span class="line">      <span class="keyword">self</span>.<span class="keyword">list</span> = cast(<span class="keyword">self</span>.<span class="keyword">list</span>.filter(i =&gt; !i.done));</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;));</span><br><span class="line">  </span><br><span class="line">export type TodoListInstance = Instance&lt;typeof TodoList&gt;;</span><br></pre></td></tr></table></figure>
<p>上面的代码在给一些状态赋值的时候，用到了MST提供的cast方法，这个方法仅在TypeScript中有意义，因为他仅仅是将入参的类型转换成对应的状态的类型，使得代码的类型能通过TypeScript的检测（因为在TypeScript看来，没有cast的时候，等号左侧和右侧的两个值并不是类型匹配的）。</p>
<p>另外，在新增Todo的时候，使用了uuid库提供的方法生成Todo的唯一id。注意在项目中安装uuid依赖。</p>
<p>本实例中还依赖了classnames库，也需要一并安装。由于uuid以及classnames库都不包含类型定义文件（*.d.ts），在项目中新增了一个modules.d.ts文件，代码如下：</p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">// modules.d.ts</span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">module</span> <span class="string">'classnames'</span>;</span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">module</span> <span class="string">'uuid/v1'</span>;</span><br></pre></td></tr></table></figure>
<h3 id="更新Root"><a href="#更新Root" class="headerlink" title="更新Root"></a>更新Root</h3><p>要在应用中使用上面定义的Model，还需要将他们加入到状态树中，更新models/index.ts文件：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// models/index.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; types &#125; <span class="keyword">from</span> <span class="string">'mobx-state-tree'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; TodoList &#125; <span class="keyword">from</span> <span class="string">'./TodoList'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> Root = types</span><br><span class="line">  .model(<span class="string">'Root'</span>, &#123;</span><br><span class="line">    todoList: types.optional(TodoList, &#123;&#125;),</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>
<h2 id="实现UI组件"><a href="#实现UI组件" class="headerlink" title="实现UI组件"></a>实现UI组件</h2><p>UI方面并不是本系列文章的重点，并且本文TodoList的UI实现比较简单，套用了TodoMVC的DOM结构和CSS，本文中只对几个关键的点做一下说明，完整的代码见文末。</p>
<h3 id="尽可能地使用observer装饰组件"><a href="#尽可能地使用observer装饰组件" class="headerlink" title="尽可能地使用observer装饰组件"></a>尽可能地使用observer装饰组件</h3><p>使用mobx-react包提供的observer装饰器装饰后的组件能响应observable的变化，并做了诸多的性能优化，尽可能为你的组件加上observer，除非你想要自定义shouldComponentUpdate来控制组件更新时机。</p>
<h3 id="尽可能地编写无状态组件"><a href="#尽可能地编写无状态组件" class="headerlink" title="尽可能地编写无状态组件"></a>尽可能地编写无状态组件</h3><p>有的同学可能看到过类似这样的说法：</p>
<blockquote>
<p>用Redux管理全局状态，用组件State管理局部状态。</p>
</blockquote>
<p>笔者不认同这种说法，根据笔者的经验来看，当项目复杂到一定的程度，使用State管理的状态会难受到让你抓狂：某个深层次的组件State只能通过改变上层组件传递的props来进行更新。</p>
<p>更何况，现在无状态（state less）组件越来越受到大家的认可，react hooks的出现也顺应了组件无状态的这个发展趋势。</p>
<p>当应用都由无状态组件构成，应用的状态都存储在触手可及的地方（如Redux或MST），想要在某些时刻修改某个状态值就变得轻而易举。</p>
<p>这也是上文中，将输入框的值维护在TodoForm中的一个重要原因。</p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/blog/tags/mobx-state-tree/" rel="tag"># mobx-state-tree</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/blog/2019/10/07/MobX-State-Tree数据组件化开发-1-：MST基础/" rel="next" title="[MobX State Tree数据组件化开发][1]：MST基础">
                <i class="fa fa-chevron-left"></i> [MobX State Tree数据组件化开发][1]：MST基础
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/blog/2019/10/07/MobX-State-Tree数据组件化开发-3-：选择正确的types-xxx/" rel="prev" title="[MobX State Tree数据组件化开发][3]：选择正确的types.xxx">
                [MobX State Tree数据组件化开发][3]：选择正确的types.xxx <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            Overview
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">lhweb</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/blog/archives/">
              
                  <span class="site-state-item-count">39</span>
                  <span class="site-state-item-name">posts</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/blog/categories/index.html">
                  <span class="site-state-item-count">6</span>
                  <span class="site-state-item-name">categories</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/blog/tags/index.html">
                  <span class="site-state-item-count">25</span>
                  <span class="site-state-item-name">tags</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/blog/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#准备工作"><span class="nav-number">1.</span> <span class="nav-text">准备工作</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#项目结构-amp-规范说明"><span class="nav-number">2.</span> <span class="nav-text">项目结构&amp;规范说明</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#确定目标"><span class="nav-number">3.</span> <span class="nav-text">确定目标</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#定义Model"><span class="nav-number">4.</span> <span class="nav-text">定义Model</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#TodoItem"><span class="nav-number">4.1.</span> <span class="nav-text">TodoItem</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#TodoForm"><span class="nav-number">4.2.</span> <span class="nav-text">TodoForm</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#TodoList"><span class="nav-number">4.3.</span> <span class="nav-text">TodoList</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#更新Root"><span class="nav-number">4.4.</span> <span class="nav-text">更新Root</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#实现UI组件"><span class="nav-number">5.</span> <span class="nav-text">实现UI组件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#尽可能地使用observer装饰组件"><span class="nav-number">5.1.</span> <span class="nav-text">尽可能地使用observer装饰组件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#尽可能地编写无状态组件"><span class="nav-number">5.2.</span> <span class="nav-text">尽可能地编写无状态组件</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">lhweb</span>

  
</div>


  <div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">Theme &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/blog/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/blog/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/blog/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/blog/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/blog/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/blog/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
